<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!--  -->
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
    <!-- 字体图标 -->
    <link rel="stylesheet" href="./fontawesome/css/all.min.css" />
    <script src="./fontawesome/js/all.min.js"></script>

    <style>
      form {
        width: 400px;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <form name="form">
      <p>
        <label class="form-label">姓名</label>
        <input
          data-action="valid"
          type="text"
          class="form-control"
          name="username"
        />
        <span class="valid-feedback"> 正确 </span>
        <span class="invalid-feedback">
          用户名必须3-18个字符，数字字母下户线组合
        </span>
      </p>

      <p>
        <label class="form-label">邮箱</label>
        <input
          data-action="valid"
          type="text"
          class="form-control"
          name="email"
        />
        <span class="invalid-feedback"> 邮箱格式 </span>
      </p>

      <p>
        <button type="button" class="btn btn-primary" data-action="save">
          提交
        </button>
      </p>
    </form>

    <div data-abc="hahah"></div>

    <script type="module">
      import { _on } from "./utils/functions.js";

      _on("click", {}, "abc");
      _on("mouseover", {}, "abc");

      _on("input", {
        valid() {
          if (this.name === "username") {
            if (/^\w{3,18}$/.test(this.value)) {
              // 通过
              this.classList.remove("is-invalid");
              this.classList.add("is-valid");
            } else {
              // 不通过
              this.classList.remove("is-valid");
              this.classList.add("is-invalid");
            }
          }

          if (this.name === "email") {
            if (
              /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
                this.value
              )
            ) {
              // 通过
              this.classList.remove("is-invalid");
              this.classList.add("is-valid");
            } else {
              // 不通过
              this.classList.remove("is-valid");
              this.classList.add("is-invalid");
            }
          }
        },
      });

      _on("click", {
        save() {
          const username = document.form.username.value;

          // 表单验证
          if (/^\w{3,18}$/.test(username)) {
            // 通过
            document.form.username.classList.remove("is-invalid");
            document.form.username.classList.add("is-valid");
          } else {
            // 不通过
            document.form.username.classList.remove("is-valid");
            document.form.username.classList.add("is-invalid");
            return;
          }

          // 表单验证
          const email = document.form.email.value;
          if (
            /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
              email
            )
          ) {
            // 通过
            document.form.email.classList.remove("is-invalid");
            document.form.email.classList.add("is-valid");
          } else {
            // 不通过
            document.form.email.classList.remove("is-valid");
            document.form.email.classList.add("is-invalid");
            return;
          }
          console.log({
            username: document.form.username.value,
          });
        },
      });
    </script>
  </body>
</html>
